<template>
  <van-notice-bar
    left-icon="volume-o"
    mode="closeable"
    :text="'最新通知：' + notices.at(-1).notice_content"
  />
  <h3 class="notice-bar">公告信息</h3>
  <div class="notice-info" v-for="item in notices" :key="item.notice_id">
    <div class="notice title"><b>公告标题：</b>{{ item.notice_title }}</div>
    <div class="notice content"><b>公告内容：</b>{{ item.notice_content }}</div>
    <div class="notice time"><b>发布时间：</b>{{ item.notice_time }}</div>
    <div class="notice unit"><b>发布单位：</b>{{ item.notice_public }}</div>
  </div>
  <TabBar></TabBar>
</template>

<script setup>
import TabBar from '@/Components/TabBar/TabBar.vue'
import { useNotice } from './Hooks/useNotice.js'
const { notices } = useNotice()
</script>

<style scoped>
.notice-bar {
  text-align: center;
}
.notice-info {
  padding: 10px 20px;
  margin: 20px 5px;
  border: 4mm ridge rgba(211, 220, 50, 0.6);
  border-radius: 10px;
  background: #fff0f0;
}
.notice {
  margin: 5px 0;
}
</style>
